import React, { useMemo, useRef } from 'react'
import { Divider, Dropdown, Modal } from 'antd';
import './style.less'
import { ResultHeader } from '../../common/ResultHeader';
import { CaretDownOutlined, CloseOutlined, FilterOutlined, MergeCellsOutlined, PlusOutlined } from '@ant-design/icons';
import { AddComputedField } from './AddComputedField';
import AddUnionField from './AddUnionField';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { useNodesData } from '@xyflow/react';
import { motion } from 'motion/react';


export const Header = ({
  total = 0,
  select = 0,
  mode,
  onChange,
  onSearch
}) => {
  const modalRef = useRef(null)
  const currentNode = useCurrentNode()
  const nodeData = useNodesData(currentNode)
  const allColumnsOptions = useMemo(() => {
    return nodeData?.data?.allColumns?.map(item => {
      return {
        label: item.columnName,
        value: item.columnId
      }
    })
  }, [nodeData])

  const onClose = () => {
    modalRef.current?.destroy?.()
    modalRef.current = null
  }
  const onMenuClick = (key) => {
    const modalMap = {
      computed: <AddComputedField onClose={onClose} allColumns={allColumnsOptions} />,
      group: <AddComputedField onClose={onClose} allColumns={allColumnsOptions} />,
      union: <AddUnionField onClose={onClose} allColumns={allColumnsOptions} />,
      filter: <AddComputedField onClose={onClose} allColumns={allColumnsOptions} />
    }
    modalRef.current = Modal.confirm({
      title: '字段预处理',
      content: modalMap[key],
      width: 940,
      footer: null,
      closable: true,
      centered: true,
      closeIcon: <motion.div className="starter-close" onClick={onClose} whileHover={{ rotate: 180 }} transition={{ duration: 0.5 }}>
        <CloseOutlined onClick={onClose} />
      </motion.div>
    })
  }
  const menu = {
    items: [
      {
        label: '计算字段',
        key: 'computed',
      },
      {
        label: '分组赋值',
        key: 'group',
      },
      {
        label: '窗口函数',
        key: 'window',
      }
    ],
    onClick: ({ key }) => onMenuClick(key)
  }
  return (
    <div className='preprocess-header'>
      <div className='header-left'>
        <Dropdown menu={menu} trigger={'click'}>
          <div><PlusOutlined /> 新增字段 <CaretDownOutlined /></div>
        </Dropdown>
        <div onClick={() => onMenuClick('union')}>
          <MergeCellsOutlined /> 合并字段
        </div>
        <div onClick={() => onMenuClick('filter')}>
          <FilterOutlined /> 筛选
        </div>
      </div>
      <div className='header-right'>
        <ResultHeader info=''
          total={total}
          select={select}
          mode={mode}
          onChange={onChange}
          onSearch={onSearch} />
      </div>
    </div>
  );
};